<template>
	<view class="parent-view">
		<view>
			<image class="gdb-tip" src="../static/icon_gdb_top_tip.png" />
			<view class="gdb-desc-view" @click="clickH5">
				<text class="gdb-desc-txt">印刷费由各位家人积极参与支持，点击查看详情</text>
			</view>
			<view class="gdb-jine-view">
				<view class="gdb-canyu-view">
					<image class="gdb-canyu-jiangbei" src="../static/icon_gdb_jiangbei.png"></image>
					<text class="gdb-canyu-count">已有{{gdbData.gdbnumberlog}}人/次参与</text>
				</view>
				<view class="gdb-price-view">
					<text class="gdb-price-txt">已收款金额：</text>
					<text class="gdb-price">{{gdbData.gdbxpjine}}元</text>
				</view>
			</view>
		</view>

		<text class="pay-btn" @click="payClick" :style="gdbData.finance_auth=='1'?'margin-top: 120rpx;':'margin-top: 200rpx;'">我要\n付款</text>
		<text v-if="gdbData.finance_auth=='1'" class="enter-btn" @click="enterClick">我要\n录入</text>

		<view class="gdb-list-parent">
			<text class="gdb-jishu-zhichi">全程服务和技术由{{gdbData.jpmuseumname}}提供</text>
			<text class="gdb-jishu-suoxu" v-if="gdbData.yjxpjine==0">所需印刷费金额：待确认</text>
			<text class="gdb-jishu-suoxu" v-else>所需印刷费金额：{{gdbData.yjxpjine}}元</text>
			<view class="gdb-pay-view">
				<text class="gdb-pay-app">APP内付款：{{gdbData.xsxpjine}}元</text>
				<text class="gdb-pay-xianxia">线下付款：{{gdbData.xxxpjine}}元</text>
			</view>
			<scroll-view class="sv-view" scroll-y="true" :show-scrollbar="false" @scrolltolower="onreachBottom">
				<view class="sv-list-view">
					<view class="gdb-list-item" v-for="(item , index) in gdbList" :key="index" @longpress="itemLongClick" :data-index="item">
						<view class="gdb-rank-view">
							<image v-if="index==0" class="gdb-rank-jiangpai" src="../static/icon_gdb_jinpai.png" />
							<image v-if="index==1" class="gdb-rank-jiangpai" src="../static/icon_gdb_yinpai.png" />
							<image v-if="index==2" class="gdb-rank-jiangpai" src="../static/icon_gdb_tongpai.png" />
							<text v-if="index>2" class="gdb-rank-tv">{{index+1}}</text>
						</view>
						<image class="gdb-rank-head" :src="item.avatar"></image>
						<view class="gdb-rank-info-view">
							<view class="gdb-rank-info-item">
								<text class="gdb-rank-name" :style="index>2?'color: #000000;':'color: #FF4206;'">{{item.name}}</text>
								<text class="gdb-rank-desc" :style="index>2?'color: #000000;':'color: #FF4206;'" v-if="item.tt==2">(录入)</text>
								<text class="gdb-rank-price" :style="index>2?'color: #000000;':'color: #FF4206;'">{{item.price}}元</text>
							</view>
							<view class="gdb-rank-info-item">
								<text class="gdb-rank-time" />
								<text class="gdb-rank-time">{{item.pay_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<inputTBDalog :isShow="isShowDelectItem" :dataSource="dialogData" @returnInputDialog="returnDelectItem" />
	</view>
</template>

<script>
	import request from '../../pages/index/request.js';
	import inputTBDalog from '../../components/tip-two-btn-dialog/tip-two-btn-dialog.vue'
	export default {
		components: {
			inputTBDalog
		},
		data() {
			return {
				page: 1,
				treeid: "",
				gdbList: [],
				gdbData: {},
				h5PageData: {},
				treeCode: "",
				dialogData: {
					title: "温馨提示",
					content: "是否删除此项记录？",
					leftTxt: "取消",
					rightTxt: "确定",
					tag: "delectItem",
				},
				isShowDelectItem: false,
				delectItem: {},
			}
		},
		methods: {
			onUnload: function() {
				uni.$off("refrash-quality-list")
			},
			onLoad: function(options) {
				uni.$on('refrash-quality-list', this.refrashList)
				this.treeid = options.treeid
				this.treeCode = options.treeCode
				this.getPedigreeGDBInfo()
				this.getPedigreeGDBList()
				this.h5Page(this.treeCode)
			},
			onShow: function() {
				this.share.url = '../../pages/tabBar/home/index?appInviteId=' + this.appUtil.getAppInviteId()
				this.share.shareType = 1
			},
			refrashList: function() {
				this.page = 1
				this.getPedigreeGDBInfo()
				this.getPedigreeGDBList()
			},
			clickH5: function() {
				if (this.h5PageData.datas.length > 0) {
					var url = "../../pages/article-details/index?load_url=" +
						encodeURIComponent(this.h5PageData.datas[0].url)
					uni.navigateTo({
						url: url
					})
				}
			},
			payClick: function() {
				if (this.gdbData.yjxpjine == 0) {
					uni.navigateTo({
						url: "../genealogy-deposit/index?treeid=" + this.treeid
					})
					return
				} else {
					if (this.gdbData.yjxpjine > this.gdbData.gdbxpjine) {
						uni.navigateTo({
							url: "../genealogy-deposit/index?treeid=" + this.treeid
						})
					} else {
						uni.showToast({
							title: "所需印刷费已筹齐，暂无法付款",
							icon: "none"
						})
					}
				}
			},
			enterClick: function() {
				if (this.gdbData.yjxpjine == 0) {
					uni.navigateTo({
						url: "../enter-donation/index?treeid=" + this.treeid
					})
				} else {
					if (this.gdbData.yjxpjine > this.gdbData.gdbxpjine) {
						uni.navigateTo({
							url: "../enter-donation/index?treeid=" + this.treeid
						})
					} else {
						uni.showToast({
							title: "所需印刷费已筹齐，暂无法录入",
							icon: "none"
						})
					}
				}
			},
			// 获取功德榜信息
			getPedigreeGDBInfo: function() {
				var that = this
				request.post("api/common/GetPedigreeGDBInfo", {
					treeid: this.treeid,
				}).then(data => {
					that.gdbData = data
				})
			},
			// 获取功德榜列表
			getPedigreeGDBList: function() {
				var that = this
				request.post("api/common/GetPedigreeGDBList", {
					treeid: this.treeid,
					page: this.page
				}).then(data => {
					if (that.page == 1) {
						that.gdbList = data
					} else {
						for (var i = 0; i < data.length; i++) {
							that.gdbList.push(data[i])
						}
					}
				})
			},
			/** scroll-view到底部加载更多 */
			onreachBottom: function() {
				if (that.gdbList.length % 20 == 0) {
					this.page = this.page + 1
					this.getPedigreeGDBList()
				}
			},
			// 删除功德榜信息
			delGDBLog: function(id) {
				var that = this
				request.post("api/common/DelGDBLog", {
					treeid: this.treeid,
					id: id
				}).then(data => {
					that.refrashList()
				})
			},
			//捐助规则
			h5Page: function(lave) {
				var that = this
				request.post("api/common/H5_page", {
					lave: lave
				}).then(data => {
					that.h5PageData = data
				})
			},
			itemLongClick: function(event) {
				this.delectItem = event.currentTarget.dataset.index
				if (this.gdbData.finance_auth == '1' && this.delectItem.tt == 2) {
					this.isShowDelectItem = true
				}
			},
			returnDelectItem: function(event) {
				this.isShowDelectItem = event.isclose
				if (event.tag) {
					this.delGDBLog(this.delectItem.id)
				}
			}
		}
	}
</script>

<style>
	@import "index.css";
</style>
